<template>
	<view class="container">
		<view class="top"  v-if="model.activity">			
			<view class="tdmc u-m-l-30">
				<text>活动类型</text>
				<text class="right">{{model.activity.ineed}}</text>
			</view>
			<view class="tdmc u-m-l-30">
				<text>活动名称</text>
				<text class="right">{{model.activity.name}}</text>
			</view>
			<view class="tdmc u-m-l-30">
				<text>团队人数</text>
				<text class="right" v-if="model.activity.intention">{{model.activity.intention.ptrs}}人</text>
			</view>

			<view class="tdmc u-m-l-30">
				<text>男生人数</text>
				<text class="right" v-if="model.activity.intention">{{model.activity.intention.nsrs}}人</text>
			</view>
			<view class="u-m-l-30 tdmc">
				<text>女生人数</text>
				<text class="right" v-if="model.activity.intention">{{model.activity.intention.nxrs}}人</text>
			</view>
			<view class="u-m-l-30 tdmc">
				<text>活动地点</text>
				<text class="right" v-if="model.activity.intention">{{model.activity.intention.hddd}}</text>
			</view>
			<view class="tdmc u-m-l-30">
				<text>团长姓名</text>
				<text class="jine">{{model.activity.leaderName}}</text>
			</view>
			<view class="u-m-l-30 tdmc">
				<text>活动经费</text>
				<text class="right" v-if="model.activity.intention">{{model.activity.intention.hdjf}}</text>
			</view>
			<view class="u-m-l-30 tdmc tdtebie">
				<text>活动简介</text>
				<text class="right" v-if="model.activity.intention">{{model.activity.intention.hdjj}}</text>
			</view>
			<view class="fgx">
			</view>
		</view>
		<view class="middle-hyjy  u-m-t-30">
			<view @click="selectShow(0)" class=" u-flex u-row-between u-m-l-30 u-m-r-30 ">
				<view class="u-font-30 xmfp">活动剪影</view>
				<view class="u-flex u-col-center">
					<view @click="onUpload" class="scxy u-m-r-30">
						<image style="" src="../../../static/img/jh.png" mode=""></image>
						<text>上传照片</text>
					</view>
					<u-icon :name="flagList[0]?'arrow-down':'arrow-up'" @click="selectShow(0)"></u-icon>
				</view>
			</view>
			<view v-show="flagList[0]">
				<view class="xhx">
				</view>
				<view class="u-flex u-wrap">
					<view class="tp" v-for="(item,index) in model.files" :key="index">
						<image @tap="previewImage(index,model.files)" :src="baseUrl + item.path"></image>
					</view>
				</view>				
			</view>
		</view>
		<view class="fgx">
		</view>
<view class="middle-hyjy  u-m-t-30">
				<view @click="selectShow(1)" class=" u-flex u-row-between u-m-l-30 ">
					<view class="u-font-30 xmfp">会议纪要</view>
					<view class="u-flex u-row-between">
						<view @click="tonewSummary(id)" class="scxy" style="margin-right: 30upx;">
							<image style="" src="../../../static/img/jh.png" mode=""></image>
							<text>新增纪要</text>
						</view>
						<u-icon name="arrow-down" style="margin-right: 20upx;" @click="selectShow(1, true)" v-if="!flagList[1]"></u-icon>
						<u-icon name="arrow-up" style="margin-right: 20upx;" @click="selectShow(1, false)" v-if="flagList[1]"></u-icon>
					</view>
				</view>
				<view class="xhx" v-show="flagList[1]"></view>
		
				<view class="uni-padding-wrap uni-common-mt" v-show="flagList[1]">
					<swiper v-if="model.notepadRecords && model.notepadRecords.length > 0" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in model.notepadRecords" :key="index">
							<view class="u-m-l-30">
								<view class="u-flex u-m-t-35">
									<view class="ty"></view>
									<text class="xmjz">{{ item.title }}</text>
									<text class="sctime" v-if="item.createTime != undefined">{{ item.createTime.substr(0, 10) }}</text>
								</view>
								<view class="u-flex">
									<view class="xx"></view>
									<view style="width: 100%;">
										<view class="zxjz u-m-t-15  u-m-b-15">{{ item.content }}</view>
										<view class="u-flex" v-if="item.imgUrl != undefined">
											<view class="tp" v-for="(xitem, xindex) in item.imgUrl.split(',')" :key="xindex">
												<image @tap="previewImageStr(xindex, item.imgUrl)" :src="getImgUrl(xitem)" style="width: 100%;height: 100%;"></image>
											</view>
										</view>
										<view class="u-m-l-30 u-m-t-20 u-flex u-row-between u-col-center">
											<view class="u-flex u-col-center">
												<view class="tyqk">团员确认情况</view>
												<view class="hekuai" v-if="item.read != null">{{ item.read.length }}/{{ item.read.length + item.unread.length }}</view>
												<view class="hekuai" v-else>0/0</view>
												<view class="u-m-l-30" v-if="$store.state.userInfo.id == item.createUserId" @click="delSummary(item.id)">删除</view>
											</view>
											<view class="u-m-r-30"><image @click="toConfirmation(item)" class="sd" src="../../../static/img/sd.png" mode=""></image></view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>		<view class="fgx u-m-t-30">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				flagList: [false, false],
				cur:0,
				id: '',
				toggle: false,
				showHeight: 300,
				totalNumber: 0,
				baseUrl:this.$mConfig.baseUrl,
				bjxm: "../../static/homepage/xmkk.png",
				list: [],
				model:{
					activity:{},
					files:[],
				}
			}
		},
		onLoad(options){
			if(options.id){
				this.id = options.id;
			}
			if(this.id == ''){
				uni.switchTab({
					url:"../../tabBar/message"
				})
			}
			this.initPage(this.id);
		},
		
		methods: {			
			toArray(imgs){
				if(imgs != null){
					return imgs.split(',');
				}
			},
			previewImage(index,files) { //预览图片
				let imgs = files;					
				let urls = [];
				for(var i in imgs){
					urls.push(this.baseUrl + imgs[i].path);
				}
				console.log(urls);
				uni.previewImage({
					current:index,
					urls: urls
				});
			},
			previewImageStr(index,files) { //预览图片
				let imgs = [];
				if(files.indexOf(',') == -1){
					imgs = [files];
				}else{
					imgs = files.split(',');
				}				
				let urls = [];
				for(var i in imgs){
					urls.push(this.baseUrl + imgs[i]);
				}
				console.log(urls);
				uni.previewImage({
					current:index,
					urls: urls
				});
			},			
			selectShow(index, flag) {
				this.flagList[index] = !this.flagList[index]
				this.initPage(this.id)
				this.$forceUpdate()
			},
			onUpload(){
				var that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: this.$mConfig.baseUrl+"/notepad/saveFile", //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'businessId': this.id,
								'isAgree':false,
								'type':'9'
				            },
							header: {
								"X-requested-With": "XMLHttpRequest",
								"ZC-TOKEN":uni.getStorageSync('token')
							},
				            success: (uploadFileRes) => {
				                console.log(uploadFileRes.data);
								that.initPage(this.id);
				            }
				        });
				    }
				})
			},
			loadFile(file){
				uni.downloadFile({
				  url: this.$mConfig.baseUrl+file,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			},
			async initPage(id){
				let result = await this.$apis.myActivityInfo({id:id});
				this.model = result.data;
				this.totalNumber = this.model.activity.woman + this.model.activity.man;
			},
			toTeamMembers() {
				uni.navigateTo({
					url: "../../notepad/zhihuiTeam/teamMembers"
				})
			},
			toProjectAllocation() {
				uni.navigateTo({
					url: "../../notepad/zhihuiTeam/projectAllocationDetails"
				})
			},
			tohomepage() {
				uni.navigateTo({
					url: "../../homepage/homepage"
				})
			},
			toteamPage() {
				uni.navigateTo({
					url: "../../homepage/teamPage"
				})
			},
			tonewSummary(id) {
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/newSummary?&type=9&id="+id
				})
			},
			toConfirmation(item) {
				uni.navigateTo({
					url: '../../notepad/zhihuiTeam/confirmation?id='+item.id
				})
			},
			toMinutesOfMeeting() {
				uni.navigateTo({
					// url:"../../notepad/zhihuiTeam/minutesOfMeeting"
				})
			},
			toFile() {
				uni.navigateTo({
					url: "../../notepad/zhihuiTeam/file"
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.tdmc {
		// line-height: 100rpx;
		border-bottom: 2rpx solid #DADFED;
		width: 90%;
		margin-left: 5%;
		padding: 30rpx;

		text {
			font-size: 30rpx;
			color: #0D1D36;
		}

		.right {
			position: absolute;
			left: 228rpx;
		}

		.jine {
			position: absolute;
			left: 228rpx;
			font-size: 30rpx;
			color: #AB61FF;
		}
	}

	.tdtebie {
		border-bottom: none;
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 30rpx;
	}

	.xmkk {
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;

		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 118rpx;
			margin-left: 27rpx;
		}
	}

	.xmfp {
		color: #0D1D36;
		font-weight: bold;
	}

	.xmfpxj {
		width: 690rpx;
		height: 600rpx;
		background: #F5F5F9;
		border-radius: 10rpx;

		.tubiao {
			color: #0D1D36;
			font-size: 30rpx;
		}

		.xhx {
			width: 100%;
			height: 1rpx;
			background-color: #CACEDB;
			margin-top: 20rpx;
		}
	}

	.qylg {
		width: 102rpx;
		height: 118rpx;
		background-size: 100% auto;
		background-position: 0 bottom;
		margin-top: 15rpx;
		overflow: hidden;
		text-align: center;

			display: flex;
			justify-content: center;
			align-items: center;
			text {
				color: #888D99;
				font-size: 26rpx;
				line-height: 35rpx;
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.tz {
		width: 68rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		height: 36rpx;
		background: #AB61FF;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}

	.name {
		font-size: 30rpx;
		color: #0D1D36;
		font-weight: bold;
	}

	.explain {
		color: #888D99;
		font-size: 26rpx;
	}

	.fpbl {
		position: absolute;
		left: 500rpx;

		text {
			font-size: 24rpx;
			color: #4B9CFF;
		}

		.fpblsz {
			width: 68rpx;
			height: 36rpx;
			border: 2rpx solid #4B9CFF;
			border-radius: 6rpx;
			margin-left: 10rpx;
		}

		.bfh {
			font-size: 24rpx;
			margin-left: 15rpx;
		}
	}

	.ckqb {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #FF8F28;
		margin-top: 30rpx;
	}

	.xhx {
		width: 100%;
		height: 2rpx;
		background-color: #DADFED;
		margin-top: 34rpx;
	}

	.scxy {
		display: flex;
		align-items: center;
		width: 190rpx;
		height: 52rpx;
		border: 2rpx solid #AB61FF;
		border-radius: 26rpx;
		color: #AB61FF;
		font-size: 26rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-left: 26rpx;
		}
	}

	.tdxy {
		width: 690rpx;
		height: 159rpx;
		background: #F5F5F9;
		border-radius: 20rpx;

		.word {
			display: flex;
			align-items: center;

			image {
				width: 41rpx;
				height: 37rpx;
			}

			text {
				color: #4B9CFF;
				font-size: 30rpx;
				margin-left: 16rpx;
			}
		}
	}

	.scsj {
		color: #0D1D36;
		font-size: 26rpx;
	}

	.sctime {
		display: flex;
		align-items: center;
		color: #888D99;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.ty {
		width: 18rpx;
		height: 18rpx;
		background: #888D99;
		border-radius: 50%;
	}

	.xmjz {
		color: #888D99;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.xx {
		width: 2rpx;
		border: 2rpx dashed #888D99;
		opacity: 0.5;
		margin-left: 7rpx;
	}

	.zxjz {
		color: #0D1D36;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 40rpx;
	}

	.tp {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		background-color: #F5F5F9;
		margin-right: 30rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		image {width:200rpx;height:200rpx;}
	}

	.tyqk {
		color: #0D1D36;
		font-size: 26rpx;
	}

	.hekuai {
		color: #FFFFFF;
		font-size: 26rpx;
		width: 72rpx;
		height: 32rpx;
		background: #4F5A78;
		border-radius: 4rpx;
		text-align: center;
		line-height: 32rpx;
		margin-left: 22rpx;
	}

	.sd {
		width: 48rpx;
		height: 48rpx;
		margin-left: 341rpx;
	}

	.word {
		display: flex;
		align-items: center;

		image {
			width: 41rpx;
			height: 37rpx;
		}

		text {
			color: #4B9CFF;
			font-size: 30rpx;
			margin-left: 16rpx;
		}
	}

	.qymc {
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;

		text {
			color: #888D99;
			font-size: 20rpx;
			line-height: 118rpx;
			margin-left: 8rpx;
		}
	}
	.swiper {height:500rpx;}
</style>
